<template>
  <div class="event-log-table h-100P">
    <el-table :data="tableData" height="98%">
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="90px"
        style="white-space: pre-line;"
      >
        <template v-slot="{row}">
          {{ row.createTime|timeFiliter }}
        </template>
      </el-table-column>
      <el-table-column label="设备位置">
        <template v-slot="{row}">
          <span v-if="row.deviceVo">
            {{ row.deviceVo.regionVO?row.deviceVo.regionVO.name:'未标识区域'}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="deviceVo.remarkName" label="产品名称"></el-table-column>

      <el-table-column label="事件">
        <template v-slot="{row}">
          <div
            v-if="row.algEventChildVos"
            class="w-100P justify-between align-center"
            style="color: #FF3209;"
          >
            发起告警
            <svg-icon
              @click="showPicture(row)"
              icon-class="picture"
              class="pictureShow-button"
            ></svg-icon>
          </div>
          <div
            v-else-if="row.fileId"
            class="w-100P justify-between align-center"
            style="color: #2FD5FF;"
          >
            完成拍照
            <svg-icon
              @click="showPicture(row)"
              icon-class="picture"
              class="pictureShow-button"
            ></svg-icon>
          </div>
          <span v-else style="color: #2FD5FF;">已响应</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'EventLogTable',
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  filters: {
    timeFiliter(timeStamp) {
      if (timeStamp) {
        return dayjs(timeStamp).format('HH:mm:ss')
      }
      return ''
    },
  },
  methods: {
    showPicture(row) {
      this.$emit('picture', row)
    },
  },
}
</script>

<style scoped lang="scss">
.event-log-table {
  max-height: 50vh;
  border: 1px solid #d9d9d9;
  border-radius: 4px;

  .pictureShow-button {
    width: 23px;
    height: 17px;
    color: #0084ee;
    cursor: pointer;

    & :hover {
      opacity: 0.7;
    }
  }
}

::v-deep {
  .el-table__header-wrapper {
    display: none;
  }

  .el-dialog {
    width: 30%;
  }

  .el-dialog__body {
    padding: 0 vw(20px);
  }

  .el-dialog__header {
    padding: 20px 20px 20px;
  }

  .el-table td,
  .el-table th.is-leaf {
    border-bottom: none;
  }
}
</style>
